<template>
  <el-dialog
    v-model="dialogVisible"
    title="请输入验证码"
    width="360px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="true"
    append-to-body
    
  >
    <div class="captcha-container">
      <div class="captcha-image-wrapper">
        <img 
          :src="codeUrl" 
          @click="refreshCode" 
          class="captcha-image"
          alt="验证码"
        />
      </div>
      <el-input
        v-model="imageCode"
        placeholder="请输入图形验证码"
        class="captcha-input"
        maxlength="4"
        @keyup.enter="handleSubmit"
      >
      </el-input>
      <div class="button-group">
        <el-button
          type="primary"
          class="submit-button"
          @click="handleSubmit"
        >
          确定
        </el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { getCodeImg } from '@/api/user'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:visible', 'success'])

const dialogVisible = ref(false)
const codeUrl = ref('')
const imageCode = ref('')
const uuid = ref('')

watch(() => props.visible, (val) => {
  dialogVisible.value = val
  if (val) {
    refreshCode()
  } else {
    imageCode.value = ''
  }
})

watch(() => dialogVisible.value, (val) => {
  emit('update:visible', val)
})

const refreshCode = async () => {
  console.log('refreshCode called');
  imageCode.value = '';
  const res = await getCodeImg();
  if (res.img) {
    codeUrl.value = "data:image/gif;base64," + res.img;
    uuid.value = res.uuid;
  }
}

const handleSubmit = () => {
  if (!imageCode.value) {
    ElMessage.error('请输入图形验证码')
    return
  }
  
  emit('success', {
    imageCode: imageCode.value,
    uuid: uuid.value
  })
}

const handleCancel = () => {
  dialogVisible.value = false;
  emit('update:visible', false);
}

// 确保正确暴露方法
defineExpose({
  refreshCode,
  // 可以添加其他需要暴露的属性或方法
});
</script>

<style lang="scss" scoped>
.captcha-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;

  .captcha-image-wrapper {
    width: 200px;
    margin-bottom: 20px;
    
    .captcha-image {
      width: 100%;
      height: 50px;
      border: 1px solid #dcdfe6;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.3s;
      
      &:hover {
        border-color: #409eff;
      }
    }
    
    .refresh-tip {
      margin-top: 8px;
      color: #909399;
      font-size: 12px;
      text-align: center;
      cursor: pointer;
      
      &:hover {
        color: #409eff;
      }
      
      i {
        margin-right: 4px;
      }
    }
  }

  .button-group {
    width: 200px;
    display: flex;
    gap: 10px;
    
    .submit-button,
    .cancel-button {
      flex: 1;
      height: 40px;
      font-size: 14px;
      border-radius: 4px;
    }
  }

  .captcha-input {
    width: 200px;
    margin-bottom: 20px;
    
    :deep(.el-input__inner) {
      text-align: center;
      letter-spacing: 4px;
      font-size: 16px;
    }

    :deep(.el-input-group__append) {
      padding: 0;
      
      .el-button {
        border: none;
        margin: 0;
        
        &:hover {
          color: #409eff;
        }
      }
    }
  }
}

:deep(.el-dialog__header) {
  margin-right: 0;
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
}

:deep(.el-dialog__headerbtn) {
  top: 20px;
}

:deep(.el-dialog__body) {
  padding: 0;
}
</style> 